<html>
<head>
<script>
var d1 = document.createElement('div');
d1.className = 't';
d1.innerHTML = 'testing1';
var d2 = document.createElement('div');
d2.className = 't';
d2.innerHTML = 'testing2';
function test(no) { 
	// current
	var cur_dom = document.body.getElementsByTagName('div')[0];
	cur_dom.style.webkitTransform = "rotate(180deg) scale(0.1)";
	setTimeout( step2, 500 );
	// new
	function step2() {
		// replace node with part
		var new_dom = (no==1) ? d1 : d2;
		cur_dom.parentNode.replaceChild(new_dom,cur_dom);
		new_dom.style.webkitTransform = "rotate(0deg)";
	}
	return false;
};
</script>
<style>
div	{ border: 1px solid red; }
div.t	{ -webkit-transform: rotate(180deg) scale(0.1);
	-webkit-transition: -webkit-transform ease-in-out 500ms; }
</style>
</head>
<body>
<a href='#' onclick='return test(1)'>test1</a>
<a href='#' onclick='return test(2)'>test2</a>
<div class='t'>this will be replaced</div>
</body>
</html>
